<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" id="ip">
    <script>

        var personArr = [
            {name: '白志刚', src: 'img/3.jpg', des: '优秀'},
            {name: '张敬涛', src: 'img/3.jpg', des: '优秀'},
            {name: '冯杏', src: 'img/3.jpg', des: '优秀'}
        ];

        var input = document.getElementsByTagName('input')[0];
        input.oninput = function() {
           console.log(filterByText(this.value, personArr));
        }

        // 使用纯函数就是不改变传进去的arr，只可以查看
        function filterByText(text, arr) {
            //过滤数组
            var newArr = [];
            for(var i = 0; i < arr.length; i ++) {
                if(arr[i].name.indexOf(text) !== -1){
                    newArr.push(arr[i]); // 可以加一个深度克隆
                }
            }
            return newArr;
        }


    </script>
</body>
</html>